<script setup lang="ts">
const slots = defineSlots()
const isCardHeaderSlot = slots['card-header'] === undefined
const isCardBodySlot = slots['card-body'] === undefined
const isCardIconSlot = slots['card-icon'] === undefined
console.log(isCardHeaderSlot)
console.log(isCardBodySlot)
console.log(isCardIconSlot)
</script>

<template>
  <div class="card-page">
    <div class="left">
      <div class="card-header">
        <slot name="card-header"></slot>
      </div>
      <div class="card-body">
        <slot name="card-body"></slot>
      </div>
    </div>
    <div :class="{ right: !isCardIconSlot, 'right-none': isCardIconSlot }">
      <slot name="card-icon"></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card {
  &-page {
    display: flex;
    border-radius: 10px;
    background-color: var(--cp-bg);
    padding: 20px 15px;
  }
}

.left {
  .card-header,
  .card-body {
    min-height: 30px;
    flex-grow: 1;
  }
}

.left {
  flex-grow: 1;
  flex-basis: 0;

  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: stretch;
}
.right-none {
  display: none;
}

.right {
  width: 20px;
  min-height: 60px;

  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
